Mobile App - Recipe Viewer
Overview of Recipe Viewer
The recipe viewer is a simple minimalistic app for beginner cooks or busy individuals looking for a place to store their favorite recipes without all the fuss.
Key features
The key features include a clean and minimal home screen, a recipe detail viewer, smooth and quick navigation, and pre-loaded recipes.
The home screen is meant to be simple while still including all of the important information. As shown by the pictures below, each recipe will an individual card that the user can access easily. In addition, it will have an add more button that will either pull up a new card where the user can load a recipe or pull up an option for the premium version of the app.
The navigation aims to be quick and self-explanatory. The navigational flow of the app is meant to be very simple unlike competitor apps. Each image is a card that will lead to more details about a recipe once clicked on.
The recipe viewer will show up once a recipe is clicked. This will open a bigger image of the final product and include a “see more” button that will lead to ingredients and following steps. Each of these steps may have pictures depending on the difficulty of the task.
Individual Screen details
The following section documents the individual screens of the application, the elements on each screen, and how the user is expected to interact with the screen.
**NOTE: the following sections should are repeated for each of the screens, with a wireframe example and an as-built screen shot.
Home Screen
This is the home screen. This screen will display all of the available recipes along with a settings button and an “add more” option.
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Settings Screen
This is the settings screen. Currently, it has a code which can be used to unlock another slot for the recipe.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Recipe Screen (Chicken Curry)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen. The layout will be the same for each recipe, however the image and steps will be different.
wireframe design
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone. Because it has a see more button, even though it is technically one screen, I included two screenshots to show the whole screen.
Recipe Screen (Breakfast Burrito’s)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen.
wireframe design
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Recipe Screen (Protein Pasta)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen.
wireframe design
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Add More Screen (NEW)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen. This screen is revamped and adds interactivity. As shown on the settings screen, each user has a referral code. For the sake of testing we will use the user’s referral code, but the referral code allows the user to unlock another recipe slot. When entered correctly, so in this case “AddRecipe” it leads to a recipe creation menu. You can enter a recipe and it will be saved as a new recipe in the main screen. In addition, I have added alerts when the referral code has been used more than once.
wireframe design
I did not have a wireframe image for this part of the app because I added it later. Additionally, it is very bare bones as it has no interactivity incorporated.
As-built screenshot
Here are multiple screenshots of the image I created running on my phone. Since there is a lot of interactivity I have included multiple screenshots to showcase what can occur. - The first screenshot is the screen that pops up when you click on “Add More”
As stated previously, the referral code that will be used for testing is “AddRecipe”. When that code is not entered, an alert pops up saying that the referral code was invalid.
Assuming you entered the correct code, the application will you take you to a screen where you can add a new recipe! In this screenshot, I have entered a new recipe for Orange Chicken.
After saving the recipe, I have a screenshot of the new home screen showcasing that there is a new card for the recipe I had just created.
Then I have a screenshot showing the screen that pops up once you click on the new card
The last screenshot is an alert that pops up if you had already clicked on the add more button
Snack code for the application
Reflection
Overall, building this app was a valuable learning experience that strengthened my front end development skills. While the app itself was intentionally simple, the process of designing multiple screens, implementing the correct navigational model, and presenting recipes in a user-friendly format gave me practical insight into how front-end components come together in a real-world application. I also encountered many issues that deterred my progress. When a user enters a valid referral code and proceeds to the next screen but decides not to add a recipe, the backend still registers the code as used. As a result, the system incorrectly prevents the user from adding a recipe later, even though no new recipe was submitted. This highlighted the importance of managing state transitions and backend logic more carefully, especially when user decisions can affect application permissions or access. Through this project, I gained hands-on experience working with layout structures, responsive design elements, and user interaction flows. Overall, this project has laid a solid foundation that will allow me to take on more advanced front end development tasks in the future.
README
Here is some info on how to write a good README!
Recipe Viewer
A beginner friendly app that allows the user to store and view a collection of recipes.
Key Features
- Simple, minimalistic UX.
- Navigation system that implements a hub and spoke model
- After clicking a recipe, it will show a bigger picture of the food and a button leading to the recipe.
- Home Screen: This is where all of the recipes are found. In addition to the recipe cards, it also has a button that leads you to the settings.
- Settings Screen: This screen shows your referral code which will be later implemented to add recipe slots.
- Recipe Screens (Chicken Curry, Breakfast Burrito, Protein Pasta): All of these screens have the same layout but display different recipes